import React, {lazy, Suspense, useContext, useEffect} from 'react';
import {Route, Routes} from 'react-router-dom';
import Loading from './components/Loading';
import User from './pages/User';
import {PrivateRoute} from './components/PrivateRoute';
import RegisterForm from './components/RegisterForm';
import LoginForm from './components/LoginForm';
import NotFound from './pages/NotFound';
import Setting from './pages/Setting';
import EditUser from './pages/User/EditUser';
import AddUser from './pages/User/AddUser';
import {API, showError, showNotice} from './helpers';
import PasswordResetForm from './components/PasswordResetForm';
import GitHubOAuth from './components/GitHubOAuth';
import PasswordResetConfirm from './components/PasswordResetConfirm';
import {UserContext} from './context/User';
import {StatusContext} from './context/Status';
import File from './pages/File';
import Task from "./pages/Task";
import AddTask from "./pages/Task/AddTask";
import TaskDetails from "./pages/Task/TaskDetails";

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
    const [userState, userDispatch] = useContext(UserContext);
    const [statusState, statusDispatch] = useContext(StatusContext);

    const loadUser = () => {
        let user = localStorage.getItem('user');
        if (user) {
            let data = JSON.parse(user);
            userDispatch({type: 'login', payload: data});
        }
    };
    const loadStatus = async () => {
        const res = await API.get('/api/status');
        const {success, data} = res.data;
        if (success) {
            console.log(
                `GitHub 仓库地址：https://github.com/Edward-Elric233/leapp-manager`
            );
            localStorage.setItem('status', JSON.stringify(data));
            statusDispatch({type: 'set', payload: data});
            localStorage.setItem('system_name', data.system_name);
            localStorage.setItem('footer_html', data.footer_html);
            localStorage.setItem('home_page_link', data.home_page_link);
            if (
                data.version !== process.env.REACT_APP_VERSION &&
                data.version !== 'v0.0.0' &&
                process.env.REACT_APP_VERSION !== ''
            ) {
                showNotice(
                    `新版本可用：${data.version}，请使用快捷键 Shift + F5 刷新页面`
                );
            }
        } else {
            showError('无法正常连接至服务器！');
        }
    };

    useEffect(() => {
        loadUser();
        loadStatus().then();
    }, []);

    return (
        <Routes>
            <Route
                path='/'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <Home/>
                    </Suspense>
                }
            />
            <Route
                path='/file'
                element={
                    <PrivateRoute>
                        <File/>
                    </PrivateRoute>
                }
            />
            <Route
                path='/task'
                element={
                    <PrivateRoute>
                        <Task/>
                    </PrivateRoute>
                }
            />
            <Route
                path='/task/add'
                element={
                    <PrivateRoute>
                        <Suspense fallback={<Loading></Loading>}>
                            <AddTask/>
                        </Suspense>
                    </PrivateRoute>
                }
            />
            <Route
                path='/task/:id'
                element={
                    <PrivateRoute>
                        <Suspense fallback={<Loading></Loading>}>
                            <TaskDetails/>
                        </Suspense>
                    </PrivateRoute>
                }
            />
            <Route
                path='/user'
                element={
                    <PrivateRoute>
                        <User/>
                    </PrivateRoute>
                }
            />
            <Route
                path='/user/edit/:id'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <EditUser/>
                    </Suspense>
                }
            />
            <Route
                path='/user/edit'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <EditUser/>
                    </Suspense>
                }
            />
            <Route
                path='/user/add'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <AddUser/>
                    </Suspense>
                }
            />
            <Route
                path='/user/reset'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <PasswordResetConfirm/>
                    </Suspense>
                }
            />
            <Route
                path='/login'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <LoginForm/>
                    </Suspense>
                }
            />
            <Route
                path='/register'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <RegisterForm/>
                    </Suspense>
                }
            />
            <Route
                path='/reset'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <PasswordResetForm/>
                    </Suspense>
                }
            />
            <Route
                path='/oauth/github'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <GitHubOAuth/>
                    </Suspense>
                }
            />
            <Route
                path='/setting'
                element={
                    <PrivateRoute>
                        <Suspense fallback={<Loading></Loading>}>
                            <Setting/>
                        </Suspense>
                    </PrivateRoute>
                }
            />
            <Route
                path='/about'
                element={
                    <Suspense fallback={<Loading></Loading>}>
                        <About/>
                    </Suspense>
                }
            />
            <Route path='*' element={NotFound}/>
        </Routes>
    );
}

export default App;
